﻿<!DOCTYPE html>
<!--法律法规信息补录编辑-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>


    <style>
        /*下载对齐*/
        .el-form-item__content {
            line-height: 28px !important;
        }

        .lh35 {
            line-height: 35px;
        }
        .vue-treeselect__control {
            height: 100%;
            border: none;
            background: none;
        }

        .vue-treeselect__placeholder {
            top: -3px;
        }

        .vue-treeselect__single-value {
            top: -3px;
        }

        .el-form-item__content {
            margin-left: 0 !important;
        }
    </style>

</head>

<body>
    <div id="app" v-cloak class="popupW100">
        <el-form :model="Form" status-icon ref="Form" label-width="100px" size="mini" label-position="right">
            <el-row>
                <!--文件级别-->
                <el-col :span="11">
                    <p class="main-label">{{LawRegulationsTable.FileLeve+mark.m}}</p>
                    <p class="lh35">{{Form.fileLeveName}}</p>
                </el-col>
                <!--法律法规名称|LawRegulationsName-->
                <el-col :span="11" :offset="2">
                    <p class="main-label">{{LawRegulationsTable.LawRegulationsName+mark.m}}</p>
                    <p class="lh35">{{Form.lawRegulationsName}}</p>
                </el-col>
            </el-row>
            <el-row>
                <!--文号/标准号-->
                <el-col :span="11">
                    <p class="main-label">{{LawRegulationsTable.Symbol+mark.m}}</p>
                    <p class="lh35">{{Form.symbol}}</p>
                </el-col>
                <!--颁布日期|消息验证|时间选择框-->
                <el-col :span="11" :offset="2">
                    <p class="main-label">{{LawRegulationsTable.IssueDate+mark.m}}</p>
                    <p class="lh35">{{Form.issueDate}}</p>
                </el-col>
            </el-row>
            <el-row>
                <!--实施日期|消息验证|时间选择框-->
                <el-col :span="11">
                    <p class="main-label">{{LawRegulationsTable.ImplementationDate+mark.m}}</p>
                    <p class="lh35">{{Form.implementationDate}}</p>
                </el-col>
                <!--附件-->
                <el-col :span="11" :offset="2">
                    <p class="main-label">{{LawRegulationsInput.Attachment+mark.m}}</p>
                    <p class="lh35">
                        <span>
                            <btn-uploadfile-input v-model="Form.attachmentName" text="上传附件"
                                                  :fileid="Form.attachment" :filename="Form.attachmentName" :showdownload="true"
                                                  @success="attachmentHandle"></btn-uploadfile-input>
                        </span>
                        <!--<el-button style="margin: 10px 10px 10px 20px;" type="success" size="mini">
                            {{attachmentList}}
                        </el-button>-->
                    </p>
                  
                </el-col>
            </el-row>
            <br>
            <!--适用条款---->
            <el-row>
                <el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{LawRegulationsTable.ApplyClause+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="textarea" v-model="Form.applyClause"
                                          autocomplete="off"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
                <!--对应工作情况描述-->
                <el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <div class="el-input--mini el-input-group">
                                <div class="el-input-group__prepend">
                                    {{LawRegulationsTable.DescribeForWork+mark.m}}
                                </div>
                                <el-input class="el-textarea__inner" type="textarea" v-model="Form.describeForWork"
                                          autocomplete="off"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
                <!--涉及部门范围文字-->
                <!-- <el-row>
                <el-form-item :label="LegalRegulatoryInformationSupplementinput.DepartmentRange+mark.m">
                </el-form-item>
            </el-row> -->
                <el-row>
                    <!--涉及部门范围文字-->
                    <p>{{LawRegulationsTable.DepartmentRange+mark.m}}</p>
                </el-row>
                <!--归口部门-->
                <el-row>
                    <el-col :span="24">
                        <div class="elst-select-mini vue-treeselect_style">
                            <el-form-item>
                                <el-input size="mini">
                                    <template slot="prepend">
                                        {{LawRegulationsTable.BelongToClass+mark.m}}
                                    </template>
                                    <!--<tree-department v-model="Form.gkbmList" :multiple="true"
    :value="gkbmList" :flat="true" :show-count="true"
    :disable-branch-nodes="true" slot="suffix" style="line-height:14px;"
    placeholder="请选择" />-->
                                    <!--<el-select @visible-change="visibleChange" v-model="Form.departmentId" :placeholder="LawRegulationsTable.BelongToClass" slot="suffix">
        <el-option label="请选择" value=""></el-option>
        <el-option v-for="item in SysDept" :label="item.name" :value="item.id">
        </el-option>
    </el-select>-->
                                    <treeselect v-model="Form.departmentId1" :options="department" :multiple="false"
                                                :show-count="true" :disable-branch-nodes="false" slot="suffix"
                                                style="line-height: 20px;" placeholder="请选择" />
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-col>

                    <!--具体实施和执行部门--LawRegulationsTable.SpecificImplement+mark.m-->
                    <!--<el-col :span="24">
                        <div class="elst-select-mini vue-treeselect_style">
                            <el-form-item>
                                <el-input size="mini">
                                    <template slot="prepend">
                                        {{LawRegulationsTable.SpecificImplement+mark.m}}
                                    </template>
                                    <tree-department v-model="Form.departmentId" :multiple="true"
                                                     :flat="true" :show-count="true"
                                                     :disable-branch-nodes="true" slot="suffix" style="line-height:14px;"
                                                     placeholder="请选择" />
                                </el-input>

                            </el-form-item>
                        </div>
                    </el-col>-->
                    <el-col :span="24">
                        <div class="elst-select-mini vue-treeselect_style">
                            <el-form-item>
                                <el-input size="mini">
                                    <template slot="prepend">
                                        {{LawRegulationsTable.SpecificImplement+mark.m}}
                                    </template>
                                    <treeselect v-model="Form.departmentId2" :options="department" :multiple="true" 
                                                :show-count="true" :disable-branch-nodes="false" slot="suffix"
                                                style="line-height: 15px;" placeholder="请选择" />

                                    <!--<tree-department v-model="Form.departmentId"  :multiple="true" slot="suffix"
                                                     style="line-height:14px;" placeholder="请选择" />-->
                                </el-input>

                            </el-form-item>
                        </div>
                    </el-col>
                    <!--了解部门--LawRegulationsTable.Understand+mark.m-->
                    <el-col :span="24">
                        <div class="elst-select-mini vue-treeselect_style">
                            <el-form-item>
                                <el-input size="mini">
                                    <template slot="prepend">
                                        {{LawRegulationsTable.Understand+mark.m}}
                                    </template>
                                    <treeselect v-model="Form.departmentId3" :options="department" :multiple="true"
                                                :show-count="true" :disable-branch-nodes="false" slot="suffix"
                                                style="line-height: 15px;" placeholder="请选择" />
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <br>
                <!--按钮-->
                <el-row type="flex" justify="end">
                    <el-form-item>
                        <!--提交按钮-->
                        <!--  <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSubmit}}</el-button>-->
                        <!--保存按钮-->
                        <el-button type="primary" @click="onSubmitForm('Form')">{{col.btnSave}}</el-button>
                        <el-button type="primary" @click="parent.ListItem.dialogVisible=false">
                            {{col.btnBack}}
                        </el-button>
                    </el-form-item>
                </el-row>
        </el-form>
        <br>
        <br>
    </div>
    <script type="text/javascript">
        Vue.component('treeselect', VueTreeselect.Treeselect)
        var app = new Vue({
            el: '#app',
            data: {
                ListItem: ListItem,
                //父页传参
                attachmentList: '下载',
                FileLeve: [],
                SysDept: [],
                SpecificImplement: [],
                Understand: [],
                department: [],
                //业务表单内容
                Form: {
                    id: guidEmpty,
                    FileLeve: '',
                    LawRegulationsName: '',
                    Symbol: '',
                    IssueDate: '',
                    ImplementationDate: '',
                    Attachment: '',
                    ApplyClause: [],
                    DescribeForWork: '',
                    SysDept: [],
                    DeptName:'',
                    SpecificImplement: [],
                    Understand: [],
                    //departmentId: null,
                    departmentId1: null,
                    departmentId2: null,
                    departmentId3: null,
                    department: [],
                    fL_StandardInformationDept1: [],
                    fL_StandardInformationDept2: [],
                    fL_StandardInformationDept3: [],
                      attachment: '',
                    attachmentName: '',
                },
                offset: 0,
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                attachmentHandle: function (response, fileid, fileName) {
                    this.Form.attachment = fileid;
                    this.Form.attachmentName = fileName;
                },
                //提交数据
                onSubmitForm: function (formName) {
                    var mythis = this;
                    this.$refs[formName].validate(function (valid) {
                        //验证通过
                        if (valid) {
                            if (mythis.Form.departmentId1) {
                                mythis.Form.fL_StandardInformationDept1 = [];
                                mythis.Form.fL_StandardInformationDept1.push({
                                    Class: String(mythis.Form.departmentId1)
                                })

                            }
                         
                            if (mythis.Form.departmentId2) {
                                mythis.Form.fL_StandardInformationDept2 = [];
                                mythis.Form.departmentId2.forEach(function (v) {
                                    mythis.Form.fL_StandardInformationDept2.push({
                                        Class: v
                                    })
                                })
                            }
                            if (mythis.Form.departmentId3) {
                                mythis.Form.fL_StandardInformationDept3 = [];
                                mythis.Form.departmentId3.forEach(function (v) {
                                    mythis.Form.fL_StandardInformationDept3.push({
                                        Class: v
                                    })
                                })
                            }
                           // mythis.Form.fileLeve = null;
                            // mythis.Form.sysDepartment.push({ departmentID: mythis.Form.deptName})
                            mythis.Form.id = getUrlParam("id");
                            console.log('mythis.Form', mythis.Form)
                            onSubmitForm(mythis, '/api/FL_BasisInformation/Save', mythis.Form);

                        } else {
                            //验证失败
                            return false;
                        }
                    });
                },
                //保存
                onSave: function () {
                    myAjax("post", this, '/api/FL_StandardInformationWeb/Save', null,
                        function (response) {
                            showMessage(response.message, 'success');
                        })
                },
                //修改
                //onSubmitForm: function () {
                //    var mythis = this;
                //    onSubmitForm(this, '/api/LegalRegulatoryInformationSupplementinput/Save', mythis.Form);
                //},

                getData: function () {
                    getData(this, '/api/FL_BasisInformation/get?id=' + this.id);
                    console.log(this.Form.BelongToClass)
                },
                //归口部门input
                input: function (value) {
                    this.Form.gkbmList = value;
                },
                //归口部门input
                input2: function (value) {
                    this.Form.SpecificImplement = value;
                },
                //归口部门input
                input3: function (value) {
                    this.Form.Understand = value;
                },
                GetDeptData: function () {
                    var mythis = this;
                    myAjax("post", mythis, '/api/SysDepartment/GetList', { model: {}, offset: 0, limit: 10 }, function (response) {
                        mythis.SysDept = response.data.pageData
                    });
                },
                //初始化部门下拉树
                getDepartmentData: function () {
                    var mythis = this;
                    myAjax("post", this, '/api/SysDepartment/GetList', { model: { Name: '', Code: '', CreateFactory: null }, offset: 0, limit: 10 }, function (response) {
                        mythis.department = menuHelperX(response.data.pageData, guidEmpty)
                    }, false);
                },
            },
            mounted: function () {
                //this.FileLeve = getDicData('65');
                //获取传值
                this.id = getUrlParam("id");
                this.Form.id = getUrlParam("id");
                console.log(this.id,this.Form.id)
                this.getData();
                this.GetDeptData();
           
                this.getDepartmentData();
                this.Form.departmentId1 = [];
                this.Form.departmentId2 = [];
                this.Form.departmentId3 = [];
                var mythis = this;
                mythis.Form.fL_StandardInformationDept1.forEach(function (a) {
                    mythis.Form.departmentId1.push(a.departmentID);
                });

                mythis.Form.fL_StandardInformationDept2.forEach(function (a) {
                    mythis.Form.departmentId2.push(a.departmentID);
                });
                mythis.Form.fL_StandardInformationDept3.forEach(function (a) {
                    mythis.Form.departmentId3.push(a.departmentID);
                });
            }
        });
        //下拉树数据格式化
        function menuHelperX(list, pid) {
            var result = [];
            if (list.length <= 0)
                return list;
            list.forEach(function (v, i) {
                var temp = {};
                for (var key in v) {
                    temp[key] = v[key];
                }
                temp.label = v.name;
                temp.parentId = temp.parentId ? temp.parentId : guidEmpty;
                var obj;
                if (temp.parentId == pid) {
                    obj = temp;
                    var nextObj = menuHelperX(list, temp.id);
                    if (nextObj.length > 0) {
                        obj.children = nextObj;
                    }
                }
                if (obj)
                    result.push(obj)
            })
            return result;
        }
    </script>
</body>

</html>